import React, { useState } from 'react'
import {
  Button,
  Form,
  Input,
  Upload,
  message,
} from "antd";
import {
  UploadOutlined,
  InboxOutlined,
  ExclamationCircleFilled,
  DownOutlined
} from "@ant-design/icons";
import type { UploadProps, UploadFile } from 'antd';

import "./index.less"

function index() {  

  const { Dragger } = Upload;

  const [infoForm] = Form.useForm();

  const [fileList, setFileList] = useState<UploadFile[]>([])

  const props: UploadProps = {
    name: 'file',
    multiple: true,
    fileList,
    beforeUpload: (file) => {
      // 将选择的文件添加到fileList
      setFileList([...fileList, file]);
      // 返回false阻止默认上传行为
      return false;
    },
    onRemove: (file) => {
      // 从fileList中移除指定文件
      setFileList(fileList.filter(f => f.uid !== file.uid));
      return true;
    },
    onChange(info) {
      // 这里可以处理文件状态变化
      const { status } = info.file;
      if (status === 'done') {
        message.success(`${info.file.name} has been added.`);
      } else if (status === 'error') {
        message.error(`${info.file.name} failed to add.`);
      }
    },
    onDrop(e) {
      console.log('Dropped files', e.dataTransfer.files);
    },
  }

  const saveRepo = (formData) => {
    // 新增知识库
  }

  const resetInfoForm = () => {
    infoForm.resetFields()
    setFileList([])
  }

  return (
    <div className='repo-form'>
      <div className='title'>创建知识库</div>
      <Form
            form={infoForm}
            layout="vertical"
            labelAlign="right"
            size='large'
            colon={false}
            onFinish={saveRepo}
          >
            <Form.Item name="repoName"
              label="你在忙于什么？"
              rules={[
                { required: true, type: "string", message: "知识库名称" },
                { max: 16, min: 2, message: "长度在2~16位之间" },
              ]}>
              <Input placeholder="为您的知识库命名" />
            </Form.Item>
            <Form.Item
              name="description"
              label="你想要达到什么目标？"
              rules={[
                { required: true, type: "string", message: "描述" },
                { max: 16, min: 2, message: "长度在2~32位之间" },
              ]}
            >
              <Input.TextArea showCount={false} rows={4} placeholder="描述您的知识库和目的" maxLength={32} />
            </Form.Item>
            <Dragger {...props}>
              <p className="ant-upload-drag-icon">
                <InboxOutlined />
              </p>
              <p className="ant-upload-text">点击或拖拽指定文件到此处</p>
            </Dragger>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                保存
              </Button>
              <Button onClick={resetInfoForm}>重置</Button>
            </Form.Item>
          </Form>
        </div>
  )
}

export default index